<div class="box box-default">
  <div class="box-body">

    <form #batchSearchForm="ngForm" class="form-inline" style="margin-bottom:8px !important;">
      <div class="box box-default collapsed-box">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;margin-bottom:8px !important;">
          <button *ngIf="_.includes(menuResourceSet,'btn-QDII-flowInfo')" (click)="showModal()" type="button" class="btn btn-primary">
            <i class="fa fa-search"></i>查看流程信息
          </button>
          <button class="btn btn-box-tool pull-right" data-widget="collapse">
            <i class="fa fa-plus"></i>
          </button>
        </div>
        <div class="box-body">
          <div class="form-group" style="padding-left:5px !important;">
            <div class="col-md-12" style="margin-top:10px;">
              <label class="control-label">发起日期：</label>
              <div style="width:210px" class="input-group date form_datetime">
                <span class="input-group-addon">
                  <i class="fa fa-calendar"></i>
                </span>
                <input class="form-control" type="text" mwlFlatpickr name="sOprDateStart" [(ngModel)]="getBody.sOprDateStart" style="background: white; cursor: pointer;">
              </div>
              <label class="control-label">到：</label>
              <div style="width:210px" class="input-group date form_datetime">
                <span class="input-group-addon">
                  <i class="fa fa-calendar"></i>
                </span>
                <input class="form-control" type="text" mwlFlatpickr name="sOprDateEnd" [(ngModel)]="getBody.sOprDateEnd" style="background: white; cursor: pointer;">
              </div>
              <label class="control-label">提交人：</label>
              <input style="width:210px" type="text" class="form-control" maxlength="2000" placeholder="提交人" [(ngModel)]="getBody.commitOprZh"
                name="commitOprZh">
            </div>
            <div class="col-md-12" style="margin-top:10px;">

              <label class="control-label">批次区间：</label>
              <input style="width:210px" [min]="0" type="text" maxlength="9" digits #nBatchNoStart="ngModel" class="form-control" placeholder="起始区间"
                [(ngModel)]="getBody.nBatchNoStart" name="nBatchNoStart">
              <label class="control-label">到：</label>
              <input style="width:210px" [min]="0" type="text" maxlength="9" digits #nBatchNoEnd="ngModel" class="form-control" placeholder="结束区间"
                [(ngModel)]="getBody.nBatchNoEnd" name="nBatchNoEnd">
              <label class="control-label">文件名称：</label>
              <input style="width:210px" type="text" class="form-control" maxlength="100" placeholder="文件名称" [(ngModel)]="getBody.sFileName"
                name="sFileName">
              <button type="button" class="btn btn-primary" style="margin-left:10px;" (click)="searchQuery()" [disabled]="nBatchNoStart.errors?.digits||nBatchNoEnd.errors?.digits">
                <i class="fa fa-search"></i>查询</button>
            </div>


          </div>
          <div class="col-md-12">
            <div class="form-group col-lg-4" style="padding-left:0px !important">
              <p *ngIf="nBatchNoStart.errors?.digits" class="errorTip" style="padding-left:80px">请输入正整数</p>
            </div>
            <div class="form-group col-lg-4" style="padding-left:0px !important">
              <p *ngIf="nBatchNoEnd.errors?.digits" class="errorTip" style="padding-left:0px">请输入正整数</p>
            </div>
          </div>
          <!-- <div class="col-md-12">

            </div> -->


        </div>
      </div>

    </form>
    <div class="ibt-fixed-table-container">
        <div id="transitTable" #qdiitransitTablePage>
        <!-- <table id="transitTable" class="table table-bordered table-hover table-striped table-keep-line" style="margin-top:unset !important;">
          <thead>
            <tr>
              <th>
                <div class="cell" style="width:50px !important">
                  <div class="checkbox checkbox-primary">
                    <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                    <label>
                    </label>
                  </div>
                </div>
              </th>
              <th>
                <div class="cell">序号</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">提交人</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">编号</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">批次号</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">当前流程</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">处理状态</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">是否有效</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">条款出处</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">文件名称</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">属性</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">适用QDII类别</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">适用QDII名称</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">内容</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">指标释义</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">bloomberg系统能否控制</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">系统设置代码</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">阈值</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">人工控制方法说明</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">系统实施相关条件</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">备注1</div>
              </th>
              <th>
                <div class="cell" (click)="orderData('commitOprZh')">备注2</div>
              </th>

            </tr>
          </thead>

          <tbody>
            <tr *ngFor="let item of listData;let i=index;">
              <td>
                <div class="cell" id="dataCheck{{i}}">
                  <div class="checkbox checkbox-primary">
                    <input type="checkbox" name="checkbox1" id="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
                    <label></label>
                  </div>
                </div>

              </td>
              <td class="short_name" [attr.title]="i+1">{{i+1}}</td>
              <td class="short_name" [attr.title]="item.commitOprZh">{{item.commitOprZh}}</td>
              <td class="short_name" [attr.title]="item.nQjId">{{item.nQjId}}</td>
              <td class="short_name" [attr.title]="item.nBatchNo">{{item.nBatchNo}}</td>
              <td class="short_name" [attr.title]="item.sFlowStepZh">{{item.sFlowStepZh}}</td>
              <td class="short_name" [attr.title]="item.sOprStateZh">{{item.sOprStateZh}}</td>
              <td class="short_name" [attr.title]="item.sValidZh">
                <div name="sValidZh" class="font-color">
                  {{item.sValidZh}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.sFileSource">
                <div name="sFileSource" class="font-color">
                  {{item.sFileSource}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.sFileName">
                <div name="sFileName" class="font-color">
                  {{item.sFileName}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.sItemTypeZh">
                <div name="sItemTypeZh" class="font-color">
                  {{item.sItemTypeZh}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.sFundTypeZh">
                <div name="sFundTypeZh" class="font-color">
                  {{item.sFundTypeZh}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.sFundGroupdsZh">
                <div name="sFundGroupdsZh" class="font-color">
                  {{item.sFundGroupdsZh}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f1">
                <div name="f1" class="font-color">
                  {{item.f1}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f3">
                <div name="f3" class="font-color">
                  {{item.f3}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f4Zh">
                <div name="f4Zh" class="font-color">
                  {{item.f4Zh}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f5">
                <div name="f5" class="font-color">
                  {{item.f5}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f6">
                <div name="f6" class="font-color">
                  {{item.f6}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f7">
                <div name="f7" class="font-color">
                  {{item.f7}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f8">
                <div name="f8" class="font-color">
                  {{item.f8}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f9">
                <div name="f9" class="font-color">
                  {{item.f9}}
                </div>
              </td>
              <td class="short_name" [attr.title]="item.f10">
                <div name="f10" class="font-color">
                  {{item.f10}}
                </div>
              </td>

            </tr>
          </tbody>
        </table> -->
      </div>
    </div>
    <div class="box-footer clearfix" style="width:100%;">
      <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="pageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
          </span>
          <span class="page-list">
            每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{listPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="sizeChange(i)">
                  <a>{{i}}</a>
                </li>
              </ul>
            </span>
            条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>

<!-- 显示流程信息modal -->
<div class="modal modal-detail" id="modal1">
  <div #flowInfo></div>
</div>
<!-- 显示流程信息modal end-->